<!--
/* 计算资源配置管理
 * Author:      yangjq 
 * CreateTime:  2023/10/18 08:35:43 
 * LastEditor:  yangjq 
 * ModifyTime:  2023/12/5 20:06:55 
 * Description: 
*/
--> 
<template>
  <div class="bigBox">

      <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-row>

          <a-col :span="12" style="margin-bottom: 20px">
            <a-form-item label="CPU当前核数">
                <a-input v-model:value="formData.nowCores" placeholder="请输入cpu当前核数" ></a-input>
            </a-form-item>
          </a-col>

          <a-col :span="12" style="margin-bottom: 20px">
            <a-form-item label="CPU总核数">
              <a-input v-model:value="formData.countCores" placeholder="请输入CPU总核数" ></a-input>
            </a-form-item>
          </a-col>

          <a-col :span="12" style="margin-bottom: 20px">
            <a-form-item label="当前使用内存" >
              <a-input v-model:value="formData.nowMemory" placeholder="请输入当前使用内存" suffix="GB"></a-input>
            </a-form-item>
          </a-col>

          <a-col :span="12" style="margin-bottom: 20px">
            <a-form-item label="总内存" >
              <a-input v-model:value="formData.countMemory" placeholder="请输入总内存" suffix="GB"></a-input>
            </a-form-item>
          </a-col>

          <a-col :span="12" style="margin-bottom: 20px">
            <a-form-item label="浮点计算" >
              <a-input v-model:value="formData.floatCalc" placeholder="请输入浮点计算" suffix="次/秒"></a-input>
            </a-form-item>
          </a-col>

          <a-col :span="24" style="margin-bottom: 60px">
            <div style="padding-left: 100px">
              <a-button type="primary" @click="addhard">添加品牌服务器数据</a-button>

              <el-table  v-if="typeList.length>0" :data="typeList" style="overflow-y: auto;width: 100%;margin-bottom: 20px">

                <el-table-column align="center" label="服务器品牌" >
                  <template #default="scope">
                    <el-input @input="hardChange($event,scope.$index,'category')" v-model="scope.row.category" :placeholder="'请输入'" style="width: 100%" />
                  </template>
                </el-table-column>

                <el-table-column  align="center" label="数量" >
                  <template #default="scope">
                    <el-input-number @input="hardChange($event,scope.$index,'number')"    v-model="scope.row.number" :placeholder="'请输入'" style="width: 100%" />
                  </template>
                </el-table-column>

                <el-table-column align="center" label="操作" >
                  <template #default="scope">
                    <a @click="typeList.splice(scope.$index, 1)">删除</a>
<!--                    <a @click="deleteHardList(scope.$index)">删除</a>-->
                  </template>
                </el-table-column>
              </el-table>

            </div>
          </a-col>

          <a-col :span="20"></a-col>
          <a-col :span="4">
            <a-button type="primary" @click="submit">提交</a-button>
          </a-col>

        </a-row>
      </a-form>

  </div>
</template>

<script lang="ts" setup>
import {reactive, ref, onMounted} from "vue";
import {getValueType} from "/@/utils";
import {defHttp} from "/@/utils/http/axios";
import {useMessage} from "/@/hooks/web/useMessage";
import { queryById , saveOrUpdate} from './ScreenData.api'


const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });

const formData = reactive<Record<string, any>>({
  nowCores : '',
  countCores: '',
  nowMemory: '',
  countMemory: '',
  floatCalc: '',

});

const model = {
  id : '1',
  value: '',
  name:'计算资源',
  code:'JSZY'    
};


const hardType={number:12,category:'服务器'}
let typeList=ref([hardType])
function addhard(){

  typeList.value.push({number:0,category:''})
}

function hardChange(data,index,key){
  let arr=JSON.parse(JSON.stringify(typeList.value))
  arr[index][key]=data
  typeList.value=arr
}

const { createMessage } = useMessage();

function submit() {
  formData.typeList = typeList.value;
  model.value = JSON.stringify(formData);
  console.log(model);
  saveOrUpdate(model, true)
    .then((res) => {
      if (res.success) {
        createMessage.success(res.message);
      } else {
        createMessage.warning(res.message);
      }
    })
    .finally(() => {
    });
}


const createdData = () => {
  queryById({id:'1'}).then((res) => {
    if (res.success) {
        console.log(res.result)
        let record = JSON.parse(res.result.value);
        if(record){
          Object.assign(formData,record);
          Object.assign(model, res.result);
          typeList.value = record.typeList?record.typeList:[];
        }
      } else {
        createMessage.error(res.message);
      }
    });
};

onMounted(()=>{
    createdData();
  }
);

</script>

<style scoped>
  .bigBox{
    width: 100%;
    padding: 20px;
  }

  .antd-modal-form {
    background-color: white;
    /*overflow-y: auto;*/
    padding: 24px 24px 24px 24px;
  }
</style>
